import $ from "vue-jquery";

var Cusername = $("#un");
var Cpassword1 = $("#p1");
var Cpassword2 = $("#p2");
var Cphone = $("#ph");
var Cvalidate = $("#vd");
var Cmail = $("#ma");

//用户名，
$(function(){
	var username = $("#username");
	$(username).blur(function(){
			if(username.val()==""){
				Cusername.html("用户名不能为空");
				Cusername.css('color','red');
			}else{
				var text = /[\u4e00-\u9fa5_a-zA-Z0-9_]{4,10}/;
				var boo = text.test(username.val());
				if(boo){
					$.ajax({
						type: "post",
						url: "#地址#",
						data: {"username":username.val()},
						dataType: "json",
						success: function (response) {
							if(response.status == "1"){
								Cusername.html("✔");
								Cusername.css('color','green');
							}else{
								Cusername.html("该用户名已被占用");
								Cusername.css('color','red');
							}
						}	
				});
			}else{
				Cusername.html("4~10位");
				Cusername.css('color','red');
			}
			}
		})
});

//密码
$(function(){
    var password1 = $("#password1");
    $(password1).blur(function(){
        if(password1.val()==""){
			Cpassword1.html("密码不能为空");
			Cpassword1.css('color','red');
        }else{
			var text = /^[a-zA-Z0-9][a-zA-Z0-9_]{5,12}$/;
		var text1 = /^\d{0,}$/
		var boo = text.test(password1.val());
        var boo1 = text1.test(password1.val());
        if(!boo){
            Cpassword1.html("输入密码必须为字母、数字_(6~16位)");
			Cpassword1.css('color','red');
		}else if(boo1){
            Cpassword1.html("密码过于简单，请重新输入");
			Cpassword1.css('color','orange');
		}else{
            Cpassword1.html("✔");
			Cpassword1.css('color','green');
        }
        /*=============改变password1的值时判断password2是否与password1一致===================*/
		var password2 = $("#password2");
		if(password2.val()==password1.val()){
			Cpassword2.html("✔");
			Cpassword2.css('color','green');
		}else{
            Cpassword2.html("两次输入的密码不正确");
			Cpassword2.css('color','red');
		}
		}
    });
});
//二次验证是否相同
$(function(){
    var password1 = $("#password1");
	var password2 = $("#password2");
    $(password2).blur(function(){
        if(password2.val()==""){
			Cpassword2.html("密码不能为空");
            Cpassword2.css('color','red');
		}else{
			if(password2.val()==password1.val()){
				Cpassword2.html("✔");
				Cpassword2.css('color','green');
			}else{
				Cpassword2.html("两次输入的密码不正确");
				Cpassword2.css('color','red');
		}
		}
    });
})

//手机号码
$(function(){
    var phone = $("#phone");
    $(phone).blur(function(){
        if(phone.val()==""){
			Cphone.html("手机号不能为空");
			Cphone.css('color','red');
		}else{
			var text = /^[1]\d{10}$/;
			var boo = text.test(phone.val());
			if(!boo){
				Cphone.html("请输入正确的手机号");
				Cphone.css('color','red');
			}else{
				$.ajax({
					type: "post",
					url: "/home/index/fieldValidation",
					data: {"phone":phone.val()},
					dataType: "JSON",
					success: function (response) {
						if(response.status == 1){
							Cphone.html("该手机号已被注册");
							Cphone.css('color','red');
						}else{
							Cphone.html("✔");
							Cphone.css('color','green');
						}
					}	
				});
			}
		}
    });
})
//邮箱
$(function(){
    var mail = $("#mail");
    $(mail).blur(function(){
        if(mail.val()==""){
			Cmail.html("邮箱号不能为空");
			Cmail.css('color','red');
		}else{
			var text = /^\d{5,10}@qq|163.com$/;
			var boo = text.test(mail.val());
			if(!boo){
				Cmail.html("请输入正确的邮箱号");
				Cmail.css('color','red');
			}else{
				Cmail.html("✔");
				Cmail.css('color','green');
			}
		}
    });
})
//验证码
$(function(){
    yzm();
})
//生成验证码
function yzm(){
	var code = "";
	var valimg = $("#valimg");
	var text = new Array(0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
	var r = Math.floor(Math.random()*255);
	var g = Math.floor(Math.random()*255);
	var b = Math.floor(Math.random()*255);
	for(var i=0;i<4;i++){
		var tindex = Math.floor(Math.random()*62);//获取数组的下标
		code+=text[tindex];
    }
    valimg.html(code);
    valimg.css("color","#fff");
    valimg.css("backgroundColor","rgb("+r+","+g+","+b+")");
}
$(function(){
	var validate =$("#validate");
	var valimg =$("#valimg");
	$(validate).blur(function(){
		if(validate.val()==""){
			Cvalidate.html("验证码不能为空");
			Cvalidate.css('color','red');
		}else{
			var yz3 = validate.val().toLowerCase();
			var yz4 = valimg.html().toLowerCase();
			if(yz3 == yz4){
				Cvalidate.html('✔');
				Cvalidate.css('color','green');
			}else{
				Cvalidate.html("验证码错误");
				Cvalidate.css('color','red');
			}
		}
	});
});

// 提交按钮
$(function(){
	var submit = $("#submit");
	$(submit).click(function(e){
		e.preventDefault();
		if(Cusername.text() == "✔" && Cphone.text() == "✔" && Cmail.text() == "✔" && Cvalidate.text() == "✔" && Cpassword1.text() == "✔" && Cpassword2.text() == "✔"){
			var user_data = $("#data_from").serialize();
			$.ajax({
				type: "post",
				url: "#后台验证地址#",
				data: {"phone.value":user_data},
				dataType: "json",
				success: function (data) {
					if(data){
						//注册成功
						
					}else{
						// alert('请完整填写内容');
					}
				}	
			});
		}else{
			alert('请完成全部信息验证');
			$("#validate").val('');
			$(Cvalidate).html(""); 
			yzm();
			
		}
	});

});

//点击图片切换验证码
$(function(){
	var valimg = $("#valimg");
	$(valimg).click(function(){
		yzm();
	});
});

//重置后清除后面内容
$(function(){
	var reset = $("#reset");
	$(reset).click(function(){
		$(Cusername).html(""); 
		$(Cphone).html(""); 
		$(Cmail).html(""); 
		$(Cvalidate).html(""); 
		$(Cpassword1).html("");
		$(Cpassword2).html("");
	});
});